<template>
	<view class="content">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-left" color="#333" size="18"></u-icon>
			</view>
				<view class="nav-title">兑换</view>
				<view class="nav-right"></view>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 商品内容 -->
		<template v-else>
		<!-- 商品图片 -->
		<swiper class="product-swiper" :style="{marginTop: (statusBarHeight + 44) + 'px'}" indicator-dots autoplay circular>
			<swiper-item>
				<image class="product-image" :src="product.image" mode="aspectFill" :lazy-load="true"></image>
			</swiper-item>
		</swiper>
		
		<!-- 商品信息 -->
		<view class="product-info">
			<view class="product-name">{{product.name}}</view>
			<view class="product-points">{{product.points}} 积分</view>
			<view class="product-meta">
					<text class="price">价格: ￥{{product.price}}</text>
					<text class="stock">库存: {{product.stock}}</text>
					<text class="sales">销量: {{product.salesVolume}}</text>
			</view>
		</view>
		
		<!-- 分割线 -->
		<view class="divider">
			<view class="divider-text">商品详情</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="product-detail">
				<text class="detail-text">{{product.productInfo || '暂无详细介绍'}}</text>
		</view>
		</template>
		
		<!-- 底部操作栏 -->
		<view class="footer">
			<view class="footer-left">
				<navigator url="/pages/home/home" open-type="switchTab" class="nav-item">
					<u-icon name="home" size="24" color="#666"></u-icon>
					<text>首页</text>
				</navigator>
				<view class="nav-item" @click="shareProduct">
					<u-icon name="share" size="24" color="#666"></u-icon>
					<text>分享</text>
				</view>
			</view>
			<view class="exchange-btn" @click="exchangeProduct">
				立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	import uIcon from "uview-ui/components/u-icon/u-icon.vue"
	import request from '@/util/request.js'
	
	export default {
		components: {
			uIcon
		},
		data() {
			return {
				statusBarHeight: 0,
				productId: '',
				userInfo: {
					userId: '',
					userAcc: '',
					userName: ''
				},
				token: '',
				product: {
					id: '',
					name: '',
					points: 0,
					price: 0,
					stock: '',
					salesVolume: '',
					productInfo: '',
					image: ''
				},
				loading: true
			}
		},
		onLoad(options) {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			
			this.getUserInfo();
			this.token = uni.getStorageSync('token') || '';
			
			// 优先从URL参数获取商品信息，如果没有则通过ID获取详情
			if (options.id) {
				this.productId = options.id;
			}
			
			// 如果通过积分商城跳转过来，可能会携带完整的商品信息
			if (options.productData) {
				try {
					this.product = JSON.parse(decodeURIComponent(options.productData));
					this.loading = false;
				} catch (error) {
					console.error('解析商品数据失败:', error);
					this.getProductDetail();
				}
			} else {
				// 否则通过接口获取商品详情
				this.getProductDetail();
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token') || '';
			this.getUserInfo();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 获取用户信息
			getUserInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						this.userInfo.userId = userInfo.userId;
						this.userInfo.userAcc = userInfo.userAcc;
						this.userInfo.userName = userInfo.userName;
					} else {
						// 未登录处理
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				} catch (e) {
					console.error('获取用户信息失败', e);
				}
			},
			// 获取商品详情
			async getProductDetail() {
				if (!this.productId) {
					this.loading = false;
					uni.showToast({
						title: '商品ID不能为空',
						icon: 'none'
					});
					return;
				}
				
				try {
					this.loading = true;
					console.log('获取商品详情，ID:', this.productId);
					
					// 调用积分商品列表接口，然后筛选出对应的商品
					const res = await request({
						url: '/score-service/score/list',
						method: 'GET'
					});
					
					if (res.success && res.data && res.data.productList) {
						// 在商品列表中查找对应的商品
						const productData = res.data.productList.find(item => item.id == this.productId);
						
						if (productData) {
							// 转换商品数据格式
							this.product = {
								id: productData.id,
								name: productData.name,
								points: productData.score,
								price: productData.price,
								stock: productData.stock,
								salesVolume: productData.salesVolume,
								productInfo: productData.productInfo,
								image: this.getProductImageUrl(productData.productImage)
							};
						} else {
							throw new Error('商品不存在');
						}
					} else {
						throw new Error(res.message || '获取商品详情失败');
					}
				} catch (error) {
					console.error('获取商品详情失败', error);
					uni.showToast({
						title: error.message || '获取商品详情失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			
			// 获取商品图片完整URL
			getProductImageUrl(imageName) {
				if (!imageName) {
					return 'http://121.36.197.175:19000/test/default-product.png'; // 默认图片
				}
				
				// 如果已经是完整URL，直接返回
				if (imageName.startsWith('http')) {
					return imageName;
				}
				
				// 拼接完整的图片URL
				return `http://121.36.197.175:19000/test/${imageName}`;
			},
			// 分享商品
			shareProduct() {
				uni.showToast({
					title: '分享功能开发中',
					icon: 'none'
				});
			},
			// 兑换商品
			exchangeProduct() {
				// 跳转到确认订单页面，传递完整的商品信息
				const productData = encodeURIComponent(JSON.stringify(this.product));
				uni.navigateTo({
					url: `/pages/shop/ConfirmOrder?productData=${productData}`
				});
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}
	
	/* 自定义导航栏 */
	.nav-bar {
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}
	
	.status-bar {
		width: 100%;
		background-color: #ffffff;
	}
	
	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	
	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		flex: 1;
	}
	
	.nav-right {
		width: 60rpx;
		flex-shrink: 0;
	}
	
	/* 加载状态 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
	}
	
	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #4CAF50;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.loading-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	/* 商品图片 */
	.product-swiper {
		width: 100%;
		height: 750rpx;
	}
	
	.product-image {
		width: 100%;
		height: 100%;
	}
	
	/* 商品信息 */
	.product-info {
		background-color: #ffffff;
		padding: 30rpx;
	}
	
	.product-name {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 15rpx;
	}
	
	.product-points {
		font-size: 36rpx;
		color: #4CAF50;
		font-weight: bold;
		text-align: right;
	}
	
	.product-meta {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}
	
	/* 分割线 */
	.divider {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		margin-bottom: 2rpx;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
	}
	
	.divider-text {
		font-size: 28rpx;
		color: #666;
		position: relative;
	}
	
	/* 商品详情 */
	.product-detail {
		background-color: #ffffff;
		padding: 30rpx;
		min-height: 200rpx;
	}
	
	.detail-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.8;
	}
	
	/* 底部操作栏 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.footer-left {
		display: flex;
		flex: 1;
	}
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 30rpx;
	}
	
	.nav-item text {
		font-size: 22rpx;
		color: #666;
		margin-top: 6rpx;
	}
	
	.exchange-btn {
		width: 240rpx;
		height: 80rpx;
		background-color: #4CAF50;
		color: #ffffff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		margin-right: 30rpx;
	}
</style>
